<template>
  <div class="mainTop-wrap">
    <p slot="topTit">
      榜单规则：将昨日国内热映的影片，按照评分从高到低排列取前10名，每天上午10点更新。
    </p>
    <div>
      <div class="top-wrap-list" v-for="(item, index) in 10" @click="details()">
        <span class="tops" v-show="showIndex"
          ><i>{{ index + 1 }}</i></span
        >
        <!-- <img :src="item.image" alt=""> -->
        <el-image class="img" :src="images" lazy></el-image>
        <div class="top-wrap-list-d">
          <span>表菩提熬到金属刀具哦i</span>
          <span>区域：</span>
          <span>上映时间：</span>
        </div>
        <span class="top-sp">900分</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showIndex: true,
      images: require("../../assets/text10.jpg"),
    };
  },
  mounted() {},
  methods: {
    details(id) {
      console.log(123);
    },
  },
};
</script>

<style lang="scss" scoped>
.mainTop-wrap {
  margin: 0 auto;
  width: 950px;
  min-height: 500px;
  p {
    color: rgb(155, 153, 153);
    font-size: 12px;
    text-align: center;
    padding: 50px;
  }
  .top-wrap-list {
    display: flex;
    justify-content: start;
    align-items: center;
    width: 950px;
    height: 220px;
    margin: 20px 0;
    position: relative;
    cursor: pointer;
    .tops {
      text-align: center;
      line-height: 50px;
      width: 50px;
      height: 50px;
      display: block;
      color: rgb(255, 176, 6);
      font-size: 50px;
    }
    .top-sp {
      color: rgb(253, 167, 7);
      font-size: 40px;
      position: absolute;
      right: 0;
    }
  }
  .img {
    width: 160px;
    height: 220px;
    margin: 0 30px;
  }
  .top-wrap-list-d {
    display: flex;
    flex-direction: column;
    span:nth-child(1) {
      margin: 10px;
      font-size: 26px;
    }
    span:nth-child(2) {
      margin: 10px;
    }
    span:nth-child(3) {
      margin: 10px;
      color: #afaaa9;
    }
  }
}
</style>